<template>
  <div id="jobResult">
    <div v-for="job in jobList" :key="job.jobId">
      <div class="sub-li" >
        <div class="sub-li-left" @click=goJobDetail(job.jobId)>
          <p class="name">{{job.jobName}}</p>
          <p class="salary">{{job.minSalary}}-{{job.maxSalary}}K</p>
          <p class="job-text"> {{codeToText(job.cityCode)}}
            <el-divider direction="vertical"></el-divider>
            {{job.experience}}
            <el-divider direction="vertical"></el-divider>
            {{job.minEdu}}
          </p>
          <el-divider direction="horizontal"></el-divider>
          <p class="job-text">
            {{job.jobPattern}}
            <span style="padding-left:148px">更新于{{job.updateTime}}</span>
          </p>
        </div >
        <div class="sub-li-right" @click=goCompanyDetail(job.company.companyId)>
          <div>
            <div class="company-info">
              <h3>{{ job.companyName }}</h3>
              <p class="company_text">
                {{ job.company.companyScale }}
                <el-divider direction="vertical"></el-divider>
                {{ job.company.industry }}
                <el-divider direction="vertical"></el-divider>
                {{ job.company.companyType==0?'国企':job.company.companyType==1?'央企':job.company.companyType==2?'民企':'外企' }}
                <el-divider direction="vertical"></el-divider>
                {{ job.company.financeList }}
              </p>
            </div>
            <div class="company_img">
              <img style="width:60px;height:60px"
                   :src="job.company.companyLogoUrl"
                   alt="">
            </div>
            <el-divider direction="horizontal"></el-divider>
            <p class="company_text" style="margin-left:16px;">
             {{job.welfare}}
            </p>
          </div>
        </div>
        <span v-show="job.jobProperty==1" :style="bage" class="badge">
             校招职位
      </span>
      </div>

    </div>
    <el-pagination
        background
        layout="prev, pager, next"
        :total="total"
        align="center"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-size="pageSize"
        :hide-on-single-page="value"
        style="padding-top: 15px"
    >
    </el-pagination>
  </div>
</template>

<script>
import eventBus from "@/assets/js/eventBus";
import {getJobList} from "@/network/recruit";
import {CodeToText} from "element-china-area-data";


export default {
  name: "JobResult",
  props:['jobName'],
  data(){
    return{
      value:true,
      currentPage:1,
      total:0,
      pageSize:30,
      bage:{
        backgroundImage:'url('+require("../../assets/img/schoolTag.png")+')',
        backgroundRepeat:'no-repeat',
      },
      schoolRecruit:true,
      jobList:[],
    }
  },
  mounted() {
eventBus.$on("sendByBus",data => {
  this.jobName= data;
  this.allJobList(data);
})
  },
  created() {
    this.allJobList(this.jobName)
  },
  methods:{
    handleCurrentChange(currentPage){
      this.currentPage = currentPage;
    },
    goJobDetail(jobId){
      this.$router.push({name:"jobDetail",params:{jobId:jobId}});
    },
    goCompanyDetail(companyId){
      this.$router.push({name:"companyDetail",params:{companyId:companyId}});
    },
    codeToText(value){
      return CodeToText[value];
    },
    allJobList(data){
      getJobList(data,this.currentPage,this.pageSize).then(res=>{
        this.jobList = res.data.data.list;
        this.total = res.data.data.total;
      })
    }
  }
}
</script>

<style scoped>
.sub-li {
  display: inline-block;
  margin: 0 8px 8px 0;
  height: 120px;
  width: 98%;
  padding: 16px 20px;
  box-sizing: border-box;
  background-color: white;
  position: relative;
  cursor: pointer;
}

.sub-li-left {
  width: 50%;
  display: inline-block;
}

.sub-li-right {
  width: 50%;
  display: inline-block;
}
.badge{
  position: absolute;
  width: 56px;
  height: 24px;
  padding-left: 5px;
  top: 0;
  left: -5px;
  font-size: 12px;
  color: #fff;
  line-height: 20px;
}
p {
  margin: 0 0;
}

.name {
  display: inline-block;
  font-size: 18px;
  color: #428af5;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.salary {
  width: 20%;
  height: 30px;
  line-height: 30px;
  text-align: left;
  display: inline-block;
  color: #fc6c38;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.job-text {
  display: inline-block;
  height: 30px;
  line-height: 30px;
  font-size: 13px;
  color: #8d92a1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.el-divider--horizontal {
  height: 0.5px;
  margin: 5px 0 5px 0;
}


.company-info {
  display: inline-block;
  height: 60px;
  margin-left: 16px;
}

.company-info h3 {
  height: 22px;
  font-size: 18px;
  font-weight: 400;
  color: #428af5;
  line-height: 22px;
  margin: 0 0 7px 0;
  padding: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.company_text {
  height: 30px;
  line-height: 30px;
  font-size: 13px;
  color: #8d92a1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.company_img {
  display: inline-block;
  height: 60px;
  width: 60px;
  line-height: 60px;
  text-align: center;
  overflow: hidden;
  float: right;
}
/deep/ .el-pagination.is-background .el-pager li{
  background-color:white;
}
/deep/ .el-pagination.is-background .btn-next{
  background-color:white;
}
/deep/ .el-pagination.is-background .btn-prev{
  background-color:white;
}
</style>